<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知遇——让知识遇见更好的自己</title>
    <link rel="shortcut icon" href="images/ico.png" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        li{
            list-style: none;
            float: left;
        }
        #Rotation{
            /* width:1920px; */
            width: 100%;
            height: 100%;
            /* height: 640px; */
            /* position: relative; */
            position: relative;
            /* margin:0px auto; */
            overflow: hidden;
            /* margin-top:60px; */
            position: relative;
        }
        #Rotation li{
            font-size: 0px;
            margin:0;
            width: 100%;
            height: 100%;
            display: block;
        }
        #Rotation #picture{
            /* width: 7680px; */
            /* height: 640px; */
            width: 400%;
            height: 100%;
            z-index: 1;
            display: flex;
        }
        #Rotation #picture img{
            width:100%;
            height: 100%;
            /* display: block; */
            /* height:640px; */
        }
        #search{
            position: absolute;
            width: 640px;
            height: 80px;
            z-index: 1;
            left: 50%;
            top:70%;
            margin-left:-320px;
            margin-top:-40px;
            padding: 15px;
            border-radius: 6px;
        }
        .transparent{
            background-color: rgb(0, 0, 0);
            opacity: 0.5;
            
        }
        #search p{
            opacity: 1;
            color:white ;
            font-size: 20px;
            /* transition-property: ; */
        }
        #search .text{
            margin-bottom: 15px;
        }
        .search-btt{
            width: 45px;
            height: 45px;
            margin-left: 8px;
            border-radius: 5px;
            background-color: rgb(67,149,255);
            float: left;
        }
        #search .icon{
            position: relative;
            left: 50%;
            top:25%;
            margin-left: -12px;
            /* margin-top: -12px; */
        }
        /*列表*/
        #Classification{
            width: 1200px;
            /* height: 300px; */
            position: relative;
            margin:0 auto;
            margin-top: 40px;
            /* background-color: aqua; */
        }
        .main{ max-width: 1200px; margin: 0 auto; padding:0px 10px;}
        #Classification .title{text-align: center; color:#333; font-size:28px; margin-bottom: 25px;}
        .height50{ height: 50px;}
        #Classification .bg_main{ background:#19A7FD;}
        .w-simgtext ul,.w-simgtext li{ list-style:none; margin:0; padding:0;}
        .w-simgtext li{margin-bottom: 25px;}
        .w-simgtext a{ display:block;text-decoration:none;}
        .w-simgtext a:hover{ text-decoration:none;}
        .w-simgtext h3{ margin: 0;line-height: 1.5; font-weight: normal;}
        .w-simgtext p{margin-bottom: 0; line-height: 1.7;}
        .w-simgtext3 ul {
            position:relative; z-index:2;
        }
        .w-simgtext3 ul li {
            width: 16.5%;
            /* padding-bottom:20px; */
            float:left;
            text-align:center;
        }
        .w-simgtext3 ul li .item{margin:0 auto; padding:1px 10px; padding-bottom:30px;  position:relative;background:url('images/bg.jpg') no-repeat center -400px;overflow: hidden;}
        .w-simgtext3 ul li i {
            display: block;
            position: relative;
            margin: 0 auto;
            margin-top: 40px;
            height:80px;
            width: 80px;
            background: url("images/icon_4.png") no-repeat;
            background-size: 200%;
        }
        .w-simgtext3 ul li.indexs1 i {background-position:0 0;}
        .w-simgtext3 ul li.indexs2 i {background-position:0 -80px;}
        .w-simgtext3 ul li.indexs3 i {background-position:0 -160px;}
        .w-simgtext3 ul li.indexs4 i {background-position:0 -240px;}
        .w-simgtext3 ul li.indexs5 i {background-position:0 -320px;}
        .w-simgtext3 ul li.indexs6 i {background-position:0 -400px;}
        .w-simgtext3 ul li u {
            display: block;
            position: absolute;
            width: 120px;
            height: 120px;
            left:50%;
            margin-left:-60px;
            margin-top:18px;
            background: url("images/icon_2.png") ;
            background-size: 100% 100%;
            -webkit-transition: all .5s ease-in-out 0s;
            -moz-transition: all .5s ease-in-out 0s;
            -ms-transition: all .5s ease-in-out 0s;
            -o-transition: all .5s ease-in-out 0s;
            transition: all .5s ease-in-out 0s;
        }
        .w-simgtext3 ul li u.cl {clip: rect(0px,210px,210px,105px);}
        .w-simgtext3 ul li u.cr {clip: rect(0px,105px,210px,0px);}
        .w-simgtext3 ul li strong {
            display: block;
            margin-top: 55px;
            font-size: 20px;
            font-weight: normal;
            color:#333; line-height:1.8;
        }
        .w-simgtext3 ul li:hover strong{color:#fff;}
        .w-simgtext3 ul li p {
            position: relative;
            top: 100px;
            color: #999;
            line-height: 20px;
            opacity: 0;
        }
        .w-simgtext3 ul li:hover p{ color:#fff; opacity: 1;}
        .w-simgtext3 ul li:hover .item {
            background-position: 0px 0px;
            -webkit-transition: all .5s ease-in-out .3s;
            -moz-transition: all .5s ease-in-out .3s;
            -ms-transition: all .5s ease-in-out .3s;
            -o-transition: all .5s ease-in-out .3s;
            transition: all .5s ease-in-out .3s;
        }
        .w-simgtext3 ul li:hover i {
            -webkit-transition: all .5s ease-in-out .4s;
            -moz-transition: all .5s ease-in-out .4s;
            -ms-transition: all .5s ease-in-out .4s;
            -o-transition: all .5s ease-in-out .4s;
            transition: all .5s ease-in-out .4s;
        }
        .w-simgtext3 ul li.indexs1:hover i {background-position:-80px 0;}
        .w-simgtext3 ul li.indexs2:hover i {background-position:-80px -80px;}
        .w-simgtext3 ul li.indexs3:hover i {background-position:-80px -160px;}
        .w-simgtext3 ul li.indexs4:hover i {background-position:-80px -240px;}
        .w-simgtext3 ul li.indexs5:hover i {background-position:-80px -320px;}
        .w-simgtext3 ul li.indexs6:hover i {background-position:-80px -400px;}
        .w-simgtext3 ul li:hover u.cl {
            clip: rect(0px, 210px, 0, 105px);
        }
        .w-simgtext3 ul li:hover u.cr {
            clip: rect(210px,105px,210px,0px);
        }
        .w-simgtext3 ul li:hover strong {
            color:#fff;
            -webkit-transition:all .3s .4s;
            -moz-transition:all .3s .4s;
            -ms-transition:all .3s .4s;
            -o-transition:all .3s .4s;
            transition:all .3s .4s;
            transform:translateY(-20px);
            -webkit-transform:translateY(-20px);
        }
        .w-simgtext3 ul li:hover p {
            top: 0;
            -webkit-transition: all .3s ease-in-out .5s;
            -moz-transition: all .3s ease-in-out .5s;
            -ms-transition: all .3s ease-in-out .5s;
            -o-transition: all .3s ease-in-out .5s;
            transition: all .3s ease-in-out .5s;
            transform:translateY(-20px);
            -webkit-transform:translateY(-20px);
        }
        @media (max-width:1000px){
            .w-simgtext3 ul li{ width:50%; text-align:left;}
            .w-simgtext3 ul li:nth-child(2n+1){ clear:both;}
            .w-simgtext3 ul li .item{position:relative; padding:1em 1em 1em 6em; background:none;width:auto; margin:0 10px;}
            .w-simgtext3 ul li u,.w-simgtext3box .pp_t{ display:none;}
            .w-simgtext3 ul li i{position:absolute; left:1em; top:1em; margin-top:0;width:4em; height:4em; background-size:8em 24em;}
            .w-simgtext3 ul li.indexs1 i {background-position:0 0;}
            .w-simgtext3 ul li.indexs2 i {background-position:0 -4em;}
            .w-simgtext3 ul li.indexs3 i {background-position:0 -8em;}
            .w-simgtext3 ul li.indexs4 i {background-position:0 -12em;}
            .w-simgtext3 ul li.indexs5 i {background-position:0 -16em;}
            .w-simgtext3 ul li.indexs6 i {background-position:0 -20em;}
            .w-simgtext3 ul li.indexs1:hover i {background-position:-4em 0;}
            .w-simgtext3 ul li.indexs2:hover i {background-position:-4em -4em;}
            .w-simgtext3 ul li.indexs3:hover i {background-position:-4em -8em;}
            .w-simgtext3 ul li.indexs4:hover i {background-position:-4em -12em;}
            .w-simgtext3 ul li.indexs5:hover i {background-position:-4em -16em;}
            .w-simgtext3 ul li.indexs6:hover i {background-position:-4em -20em;}
            #Classification .w-simgtext3 ul li:hover .item{ background: #19A7FD;}
            .w-simgtext3 ul li strong{ margin-top:0;font-size:16px;}
            .w-simgtext3 ul li p{  top:0; line-height:1.5;font-size:12px; opacity: 1;}
            .w-simgtext3 ul li:hover strong{transform:translateY(0);-webkit-transform:translateY(0);}
            .w-simgtext3 ul li:hover p{ transform:translateY(0);-webkit-transform:translateY(0);}
        }
        @media (max-width:520px){
            .w-simgtext3{ text-align:center;}
            .w-simgtext3 ul li{margin-bottom: 1em; padding-bottom:0;}
            .w-simgtext3 ul li i{ top:50%; margin-top:-2em;}
            .w-simgtext3 ul li p{ display:none;}
            .w-simgtext3 ul li strong{ font-size:110%;}
            .w-simgtext3 ul li .item{padding:1em 0.5em 1em 5.5em; margin:0;}
        }
        @media (max-width:480px){
            .w-simgtext1 li .s_img img{ max-width: 4.5em; max-height: 4.5em;}
            .w-simgtext1 li .sigt1 h3{ font-size: 120%;}
            .w-simgtext2 li .s_img{ max-width: 4.5em; max-height: 4.5em;}
            .w-simgtext2 li .sigt1 h3{ font-size: 105%;}

        }
        /* 列表 */

        #article{
            width: 1200px;
            
            /* visibility:hidden; */
            position: relative;
            clear: both;
            margin:0 auto;
            /* background-color: rgb(67,149,255); */
        }
        #article .article-title{
            visibility: hidden;
            height:40px;
            line-height: 40px;
            padding-bottom: 20px;
        }
        #article .titleTxt{
            margin-left:10px ;
            /* font-weight: 600; */
            font-size: 36px;
            height:40px;
            color:rgb(36, 36, 36);
            line-height: 40px;
            float: left;
        }
        #article .title2{
            float:right;
            color:slategrey
        }
        #article .artice-mian:nth-child(3){
            margin-right:0px
        }
        #article .artice-mian:nth-child(6){
            margin-right:0px
        }
        #article .artice-mian{
            width: 380px;
            height: 330px;
            border-radius: 5px;
            /* background-color: rgb(67,149,255); */
            box-shadow: 0px 0px 10px rgb(129, 128, 128,0.5);
            float: left;
            margin-top: 30px;
            margin-right:30px;
        }
        #article .artice-mian:hover{
            box-shadow: 0px 0px 30px rgba(98, 98, 98, 0.719);
            transform: translateY(-5px);
        }
        #article img{
            width: 380px;
            height: 200px;
            border-radius: 5px 5px 0 0;
        }
        #article .articleTitle{
            font-weight: bolder;
            font-size: 18px;
            padding-bottom:5px;
            width: 360px;
            height: 22px;
            overflow: hidden;
        }
        #article .articleText{
            font-size: 16px;
            height: 40px;
            color: slategray;
            padding-bottom:5px;
            overflow: hidden;
        }
        #article .time{
            color:silver;
            font-size: 14px;
            padding-top:15px;
            position: relative;
            bottom: 5px;
        }
        #add{
            position: flex;
            left: 0;
            right:0;
            width: 100%;
            /* height: 200px; */
            background-color: red;
        }
        #hot-topic{
            clear: both;
            width: 100%;
            /* height: 700px; */
            position: flex;
            padding-top:30px;
        
        }
        #hot-topic .topic-title{
            width: 1200px;
            height: 50px;
            position: relative;
            visibility: hidden;
            margin:40px auto;
            /* background-color: rgb(211, 211, 211); */
            text-align: center;
            line-height: 50px;
        }
        #hot-topic .topic-title p{
            color:rgba(41, 40, 40, 0.911);
            font-size:50px;
            font-weight: 600;
            letter-spacing:10px;
        }
        #hot-topic .topic{
            width: 1200px;
            height: 200px;
            position: relative;
            visibility: hidden;
            margin:0 auto;
            padding:20px 0;
            /* background-color: brown; */
            border-top: 1px solid rgba(116, 116, 116, 0.329);
        }
        #hot-topic .topic:last-child{
            border-bottom: 1px solid rgba(116, 116, 116, 0.329);
        }
        #hot-topic .topic-left{
            width: 68%;
            height: 80%;
            padding: 0 2%;
            float: left;
        }
        #hot-topic .topic-right{
            width: 28%;
            height: 100%;
            float: left;
        }
        
        #hot-topic .topic-right img{
            width: 95%;
            height: 100%;
            border-radius: 5px;
        }
        #hot-topic .topic-left p{
            padding-right: 4%;
            padding-bottom: 15px;
            font-size: 18px;
            color:gray
        }
        #hot-topic .topic-left .topic-subject{
            font-size: 26px;
            color: black;
        }
        #hot-topic .topic-left .topic-text{
            /* font-size: 26px; */
            height: 60px;
            line-height: 30px;
            overflow: hidden;
            /* color: black; */
        }  
        #hot-topic .topic-left .topic-span{
            line-height: 40px;
            color: rgb(0,162,255);
            
        }
        #hot-topic .topic-left .topic-span span{
            padding-left: 30px;
        }
        #hot-topic .topic-left .topic-span svg{
            position: absolute;
            margin-top: 10px;
        }
        .animate__animated.animate__bounce {
        --animate-duration: 4s;
        }
        :root {
          --animate-duration: 800ms;
          --animate-delay: 0.9s;
        }   
        .animate__animated.animate__slideInRight {
        --animate-duration: 3s;
        }
        :root {
          --animate-duration: 800ms;
          --animate-delay: 0.9s;
        }  
        .animate__animated.animate__slideInLeft{
        --animate-duration: 2.5s;
        }
        :root {
          --animate-duration: 800ms;
          --animate-delay: 0.9s;
        }                               
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var timer=null
        window.onload = function () {
            var tar=window.innerWidth;
            console.log('client2:'+window.innerWidth)
            console.log(-document.body.clientWidth*4)
            setInterval(function () {
                // console.log('kaishi')
                var div = document.getElementById('picture')
                // console.log(div)
                // console.log('win',window.innerWidth)
                // console.log(div)
                move(div, tar)
                tar = tar + window.innerWidth;
                // console.log('tar'+tar)
                if (tar==window.innerWidth*3){
                    tar=0;
                }
                // console
            }, 15000)
            $('topic-title').on('scroll',function(){
                console.log('1')
                if($('#article').offsetHeight-window.innerHeight+60){
                    $(this).css.visibility('visible')
                    $(this).className('animate__animated animate__fadeInUp')
                }
            })
            $.ajax({
                url:'http://localhost:3000/homepage/topic',
                type:'get',
                dataType:'json',
                success:function(results){
                    var strHTML=''
                    var e=results.data
                    // console.log('aaa')
                    console.log(e)
                            for(var i=0;i<e.length;i++){
                                strHTML+=`<div class='topic' onclick="topicUrl(this)">
                                            <div style="display: none;">${e[i].aId}</div>
                                            <div class='topic-left'>
                                                <p class="topic-subject">${e[i].title}</p>
                                                <p class="topic-write">作者&nbsp;:&nbsp;<span>${e[i].nickName}</span></p>
                                                <p class="topic-text">${e[i].content}</p>
                                                <p class="topic-span">
                                                    <svg t="1599808729266" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4362" width="24" height="24"><path d="M819.4048 529.7664a25.6 25.6 0 0 1 36.1984-36.1984l67.584 67.584a76.8 76.8 0 0 1 0 108.5952l-253.44 253.44a76.8 76.8 0 0 1-108.544 0l-389.9392-389.888a56.32 56.32 0 0 1-16.384-36.864L140.288 221.0816A76.8 76.8 0 0 1 221.0816 140.288l275.3536 14.4896a56.32 56.32 0 0 1 36.864 16.384l244.0192 244.0704a25.6 25.6 0 0 1-36.1984 36.1984L497.152 207.4624a5.12 5.12 0 0 0-3.3792-1.536L218.368 191.488a25.6 25.6 0 0 0-26.88 26.88l14.4896 275.3536a5.12 5.12 0 0 0 1.4848 3.3792l389.888 389.888a25.6 25.6 0 0 0 36.1984 0l253.44-253.44a25.6 25.6 0 0 0 0-36.1984l-67.584-67.584zM384 486.4a102.4 102.4 0 1 1 0-204.8 102.4 102.4 0 0 1 0 204.8z m0-51.2a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z" fill="#1296db" p-id="4363"></path></svg>
                                                    <span>测试、AI、前端</span>
                                                </p>
                                            </div>
                                            <div class='topic-right'><img src="upload/${e[i].aImg}" alt=""></div>
                                          </div>`
                            }
                            $('#hot-topic').append(strHTML)
                        },
                error:function(error){
                    console.log(error)
                },
            })
            $.ajax({
                url:'http://localhost:3000/homepage/article',
                type:'get',
                dataType:'json',
                success:function(results){
                    var strHTML=''
                    var e=results.data
                    console.log('aa',e)
                    for(var i=0;i<e.length;i++){
                        strHTML+=`<div class='artice-mian' onclick="articleUrl(this)">
                                    <div style="display: none;">${e[i].tId}</div>
                                    <div>
                                        <img src="upload/${e[i].tlmg}" alt="">
                                    </div>
                                    <div style="padding: 10px 8px;">
                                        <p class='articleTitle'>${e[i].title}</p>
                                        <p class='articleText'>${e[i].content}</pz>
                                        <p class='time'><span>${e[i].tTime}</span>更新·<span>13332</span> 浏览</p>
                                    </div>
                                    
                                    </div>`
                    }
                    $('.articeMian').append(strHTML)
                    
                }
            })
        }
        //onload结尾
        window.onscroll=function(){
            var tag=document.documentElement.scrollTop
            var pic=document.getElementById('Rotation').offsetHeight
            if(tag>document.getElementsByClassName('article-title')[0].offsetHeight-window.innerHeight+120){
                document.getElementsByClassName('article-title')[0].style.visibility='visible'
                document.getElementsByClassName('article-title')[0].className='animate__animated animate__fadeInUp article-title'
            }
            if(tag>document.getElementsByClassName('topic-title')[0].offsetTop-window.innerHeight+60){
                document.getElementsByClassName('topic-title')[0].style.visibility='visible'
                document.getElementsByClassName('topic-title')[0].className='topic-title animate__animated animate__fadeInUp'
            }
            if(tag>document.getElementsByClassName('topic')[0].offsetTop-window.innerHeight+60){
                document.getElementsByClassName('topic')[0].style.visibility='visible'
                document.getElementsByClassName('topic')[0].className='animate__animated animate__slideInRight topic'
            }
            if(tag>document.getElementsByClassName('topic')[1].offsetTop-window.innerHeight+60){
                document.getElementsByClassName('topic')[1].style.visibility='visible'
                document.getElementsByClassName('topic')[1].className=' animate__animated animate__slideInLeft topic'
            }
            if(tag>document.getElementsByClassName('topic')[2].offsetTop-window.innerHeight){
                document.getElementsByClassName('topic')[2].style.visibility='visible'
                document.getElementsByClassName('topic')[2].className='animate__animated animate__slideInRight topic'
            }
        }
        function move(obj,target){
            // console.log('传过的tar',target)
            var speed=0
            clearInterval(timer)
            // console.log(obj)
            timer=setInterval(function(){
                var offsetleft=obj.offsetLeft
                // console.log("offsetleft:",offsetleft)
                speed =-2
                if((offsetleft+target)==0){
                    clearInterval(timer)
                    // console.log('a')
                }
                else{
                    obj.style.marginLeft=(offsetleft+speed)+'px'
                    // console.log('b')
                }
                if(offsetleft<-window.innerWidth*3){
                    obj.style.marginLeft=0+'px'
                    document.getElementById('article').className='animate__animated animate__fadeInUp'
                }
            },1)
        // console.log('循环后'+obj.style.marginLeft)
        }
        //文章存储跳转
        var article=[]
        function articleUrl(that){
            var aId = that.firstElementChild.innerHTML
            console.log(aId)
            article.push({"aId":aId})
            sessionStorage['article'] = JSON.stringify(article)
            location.href = "Article.html"
        }
        //话题存储跳转
        var titleProfile=[]
        function topicUrl(that){
            var titleName =that.firstElementChild.nextElementSibling.firstElementChild.innerHTML
            var titleContent =that.firstElementChild.nextElementSibling.lastElementChild.previousElementSibling.innerHTML
            // console.log(that.firstElementChild.nextElementSibling.lastElementChild.previousElementSibling.innerHTML)
            var aId = that.firstElementChild.innerHTML
            titleProfile.push({"titleName":titleName,"titleContent":titleContent,"aId":aId})
            sessionStorage['titleProfile'] = JSON.stringify(titleProfile)
            location.href = "topic2.html"
        }
    </script>

</head>
<body>
    <div id="Navigation"></div>
    <div id="Rotation">
        <div >
            <ul style="position: absolute;width:100px;height: 100px; z-index: 10;">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <ul id='picture'>  
                    <img src="images/CoUBUl9WDNeAIzVQACdLfc7J4vY812.png" alt="">
                    <img src="images/CoUBUl9XiJ2AcoKiACc6RHd2m74890.png" alt="">
                    <img src="images/CoUBUl9U-ySAK5hNACNyQh_1xPY244.png" alt="">
                    <img src="images/CoUBUl9WDNeAIzVQACdLfc7J4vY812.png" alt="">
            </ul>
            
        </div>
        <div id="search" class='transparent'></div>
        <div id="search" class=''>
            <div class="text">
                <p>你感兴趣的这里都能发现...</p>
            </div>
            <div>
                <input type="text" name="" id="" style="width: 570px;height: 45px;border-style :none;border-radius: 5px;font-size: 18px; float: left;padding-left: 15px;" placeholder="如何成为前端大佬？">
                <a href="index.html"><div class='search-btt' onclick="">
                    <svg  t="1597731143968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8353" width="24" height="24"><path d="M798.386532 434.840666c0 90.322122-32.875059 173.048241-87.325366 236.740866 0 0 195.358181 195.621353 232.072842 231.577263 30.171373 29.522384-4.434167 75.370595-43.419638 33.901111-23.467419-24.980951-228.233239-225.844701-228.233239-225.844701-63.803709 54.933123-146.802359 88.132246-237.587665 88.132246-201.30588 0-364.492043-163.235758-364.492043-364.506784 0-201.271026 163.186162-364.477109 364.492043-364.477109C635.200369 70.363558 798.386532 233.56964 798.386532 434.840666zM433.893466 128.136356c-169.349788 0-306.69027 137.333832-306.69027 306.676681 0 169.398108 137.340482 306.732963 306.69027 306.732963 169.404026 0 306.744508-137.334855 306.744508-306.732963C740.637974 265.470187 603.297491 128.136356 433.893466 128.136356z" p-id="8354" fill="#fff"></path></svg>
                </div></a>
            </div>
        </div>
    </div>
    <!-- 分类 -->
    <div id='Classification' class="animate__animated animate__backInLeft">
        <div class="main">
            <div class="w-simgtext w-simgtext3">
                <ul class="clearfix">
                    <li class="indexs1"><a href="Article.html">
                        <div class="item">
                            <u class="cl"></u><u class="cr"></u>
                            <i></i><strong>前端</strong>
                            <p>你想成为大神么</p>
                            <p>了解更多前端内容</p>
                        </div></a>
                    </li>
                    <li class="indexs2"><a href="Article.html">
                        <div class="item">
                            <u class="cl"></u><u class="cr"></u>
                            <i></i><strong>后端</strong>
                            <p>你想成为大神么</p>
                            <p>了解更多后端内容</p>
                        </div></a>
                    </li>
                    <li class="indexs3"><a href="Article.html">
                        <div class="item">
                            <u class="cl"></u><u class="cr"></u>
                            <i></i><strong>安卓</strong>
                            <p>你想成为大神么</p>
                            <p>了解更多后端内容</p>
                        </div></a>
                    </li>
                    <li class="indexs4"><a href="Article.html">
                        <div class="item">
                            <u class="cl"></u><u class="cr"></u>
                            <i></i><strong>IOS</strong>
                            <p>你想成为大神么</p>
                            <p>了解更多IOS内容</p>
                        </div></a>
                    </li>
                    <li class="indexs5"><a href="Article.html">
                        <div class="item">
                            <u class="cl"></u><u class="cr"></u>
                            <i></i><strong>人工智能</strong>
                            <p>你想成为大神么</p>
                            <p>了解更多人工智能内容</p>
                        </div></a>
                    </li>
                    <li class="indexs6"><a href="Article.html">
                        <div class="item">
                            <u class="cl"></u><u class="cr"></u>
                            <i></i><strong>生活</strong>
                            <p>你了解更多趣事么</p>
                            <p>了解更多生活趣事内容</p>
                        </div></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 热点文章 -->
    <div id="article" >
        <div class='article-title'>
            <svg style="float: left;" t="1599739134732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2434" width="40" height="40"><path d="M788.551 292.895c-74.801 0-135.633-60.832-135.633-135.605v-156.171h-487.636c-45.595 0-82.548 36.982-82.548 82.549v856.719c0 45.567 36.955 82.493 82.548 82.493h693.46c45.571 0 82.523-36.926 82.523-82.493v-647.493h-152.714zM805.084 839.116h-586.199v-55.301h586.199v55.301zM805.084 662.15h-586.199v-55.301h586.199v55.301zM805.084 485.184h-586.199v-55.301h586.199v55.301z" p-id="2435" fill="#1296db"></path><path d="M706.002 1.119v156.171c0 45.567 36.955 82.493 82.549 82.493h152.714l-235.263-238.662z" p-id="2436" fill="#1296db"></path></svg>
            <div class='titleTxt'>热点文章</div>
            <div class='title2'>查看更多</div>    
        </div>
        <div class='articeMian'>
        </div>
        
    </div>
    <div style="clear: left;"></div>
     <!-- 热点话题 -->
    <div id="hot-topic">
        <div class='topic-title'><p>热门话题</p></div>
    </div>
    <div style="height: 50px;">
    </div>
    <script>
        $("#Navigation").load("Navigation.html");
    </script>  
</body>
 